<template>
  <div class="home">
    <div class="top-header">
      <h1 class="main-title">欢迎来到球员管理系统</h1>
    </div>
    <h2 class="page-title">统计与消息</h2>
    <div class="dashboard">
      <!-- 球员统计模块 -->
      <div class="stat-box">
        <h2><img src="../images/球员统计.png" alt="球员统计图标" class="icon" /> 球员统计</h2>
        <div class="stats horizontal">
          <div class="stat-item">
            <h3>球员数量</h3>
            <p>{{ playerCount }}</p>
          </div>
          <div class="stat-item">
            <h3>待审批请假</h3>
            <p>{{ pendingPlayerLeaves }}</p>
          </div>
          <div class="stat-item">
            <h3>未完成训练</h3>
            <p>{{ incompleteTrainingCount }}</p>
          </div>
        </div>
      </div>

      <!-- 教练统计模块 -->
      <div class="stat-box">
        <h2><img src="../images/教练统计.png" alt="教练统计图标" class="icon" /> 教练统计</h2>
        <div class="stats horizontal">
          <div class="stat-item">
            <h3>教练数量</h3>
            <p>{{ coachCount }}</p>
          </div>
          <div class="stat-item">
            <h3>待处理请假</h3>
            <p>{{ pendingCoachLeaves }}</p>
          </div>
          <div class="stat-item">
            <h3>未完成训练</h3>
            <p>{{ incompleteTrainingCount }}</p>
          </div>
        </div>
      </div>

      <!-- 公告模块 -->
      <div class="announcements">
        <h2><img src="../images/最新公告.png" alt="最新公告图标" class="icon" /> 最新公告</h2>
        <ul>
          <li v-for="announcement in announcements" :key="announcement.id">
            {{ announcement.title }}
          </li>
        </ul>
      </div>

      <!-- 资讯模块 -->
      <div class="news">
        <h2><img src="../images/最新资讯.png" alt="最新资讯图标" class="icon" /> 最新资讯</h2>
        <ul>
          <li v-for="news in newsArticles" :key="news.id">
            {{ news.newsName }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Home',
  data() {
    return {
      playerCount: 0,
      pendingPlayerLeaves: 0,
      coachCount: 0,
      pendingCoachLeaves: 0,
      incompleteTrainingCount: 0,
      announcements: [],
      newsArticles: []
    };
  },
  mounted() {
    this.getPlayerCount();
    this.getCoachCountAndPendingLeaves();
    this.getIncompleteTrainingCount();
    this.getLatestAnnouncements();
    this.getLatestNews();
  },
  methods: {
    getPlayerCount() {
      axios.get('http://localhost:8080/player/count')
          .then(response => {
            this.playerCount = response.data.data;
          })
          .catch(error => {
            console.error('Error fetching player count', error);
          });
      axios.get('http://localhost:8080/leave/player/pending/count')
          .then(response => {
            this.pendingPlayerLeaves = response.data.data;
          })
          .catch(error => {
            console.error('Error fetching pending player leaves count', error);
          });
    },
    getCoachCountAndPendingLeaves() {
      axios.get('http://localhost:8080/coach/count')
          .then(response => {
            this.coachCount = response.data.data;
          })
          .catch(error => {
            console.error('Error fetching coach count', error);
          });
      axios.get('http://localhost:8080/leave/coach/pending/count')
          .then(response => {
            this.pendingCoachLeaves = response.data.data;
          })
          .catch(error => {
            console.error('Error fetching pending coach leaves count', error);
          });
    },
    getIncompleteTrainingCount() {
      axios.get('http://localhost:8080/trainingschedule/incomplete/count')
          .then(response => {
            this.incompleteTrainingCount = response.data.data;
          })
          .catch(error => {
            console.error('Error fetching incomplete training count', error);
          });
    },
    getLatestAnnouncements() {
      axios.get('http://localhost:8080/announcement/latest')
          .then(response => {
            this.announcements = response.data; // 假设后端返回的数据格式直接是数组，不需要再使用 response.data.data
          })
          .catch(error => {
            console.error('Error fetching latest announcements', error);
          });
    },
    getLatestNews() {
      axios.get('http://localhost:8080/news/latest')
          .then(response => {
            this.newsArticles = response.data; // 假设后端返回的数据格式直接是数组，不需要再使用 response.data.data
          })
          .catch(error => {
            console.error('Error fetching latest news', error);
          });
    }
  }
};
</script>

<style scoped>
.home {
  text-align: center;
  padding: 20px;
}

.top-header {
  margin-bottom: 20px;
}

.main-title {
  font-size: 32px;
}

.page-title {
  font-size: 24px;
  margin-top: 10px;
  text-align: center;
}

.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-box, .announcements, .news {
  background: #f2f2f2;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.stat-box h2, .announcements h2, .news h2 {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.stats.horizontal {
  display: flex;
  justify-content: space-between;
}

.stats .stat-item {
  text-align: center;
  flex: 1;
}

.stats .stat-item h3 {
  font-size: 16px;
  margin: 5px 0;
}

ul {
  padding-left: 20px;
}
</style>
